<!--
 * @Date: 2024-12-23 10:24:35
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-25 11:22:19
 * @Description: 常用功能cardItem
-->
<template>
  <div class="tool-card-item" @click="onJumpToMenu()">
    <div class="card-item-icon">
      <RkIcon :name="cardItem.icon || 'ele-List'" size="32px"/>
    </div>
    <div class="card-item-title text-over-ellipsis">
      <span>{{ cardItem.alias || cardItem.name || '暂无' }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { RkIcon } from '@/components/rk-icon/index.js'
import { useRouter } from 'vue-router';
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes';
import { deepClone } from '@hp/utils/data';

const props = defineProps({
  item: { type: Object, default: () => ({}) },
  data: { type: Object, default: () => ({}) },
  design: { type: Boolean, default: true }
})

const { tagsViewRoutes } = useTagsViewRoutes();
const cardItem = computed(() => {
  const { path } = props.item
  let route = null
  const result = deepClone(props.item)
  if (path) {
    route = tagsViewRoutes.find(v => v.path === path)
    result['icon'] = route ? route.meta.icon : ''
    result['name'] = route ? route.meta.title : ''
    result['route'] = route || ''
  }
  return result
})

const router = useRouter()
const onJumpToMenu = () => {
  console.log('onJumpToMenu', cardItem.value)
  if (props.design) return
  const route = cardItem.value.route
  if (!route) return
  const { name, redirect, query, meta} = route;
  if (meta?.isLink && !meta?.isIframe) {
    window.open(meta?.isLink)
  } else if (redirect) {
    router.push(redirect)
  } else {
    router.push({ name, query: { ...query } })
  }
}



</script>

<style lang="scss" scoped>
.tool-card-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  .card-item-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-8);
    margin-bottom: 12px;
  }
  .card-item-title {
    cursor: pointer;
    text-align: center;
  }
}

</style>